<!--  -->
<template>
  <div class="form-info-list-table">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="systemName" label="系统" :width="custom && custom.length > 0 ? 150: ''" align="left">
        <template slot-scope="scope">
          <TooltipOver :tipValue="scope.row.systemName" :refTipName="'ref-systemName' + scope.row.id"/>
        </template>
      </el-table-column>
      <el-table-column prop="systemItemName" label="标题" :width="custom && custom.length > 0 ? 150: ''" align="left">
        <template slot-scope="scope">
          <TooltipOver :tipValue="scope.row.systemItemName" :refTipName="'ref-systemItemName' + scope.row.id"/>
        </template>
      </el-table-column>
      <template v-if="custom && custom.length > 0">
        <el-table-column v-for="(item, index) in custom" :key="index" :prop="'custom' + (index + 1)"
          :label="item.label">
          <template slot-scope="scope">
            <TooltipOver :tipValue="scope.row.custom1" :refTipName="'ref-custom1' + scope.row.id" v-if="(index + 1) === 1"/>
            <TooltipOver :tipValue="scope.row.custom2" :refTipName="'ref-custom2' + scope.row.id" v-if="(index + 1) === 2"/>
          </template>
        </el-table-column>
      </template>
      <el-table-column prop="ip" label="提交IP" :width="custom && custom.length > 0 ? 130: ''" align="center">
      </el-table-column>
      <el-table-column prop="createAt" label="提交时间" :width="custom && custom.length > 0 ? 200: ''" align="center">
        <template slot-scope="scope">
          {{scope.row.createAt | dateformat('YYYY-MM-DD HH:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column label="操作" :width="custom && custom.length > 0 ? 100: ''" align="center">
        <template slot-scope="scope">
          <el-button @click="viewFormInfo(scope.row.id)" type="text " size="small">详情</el-button>
          <el-button @click="deleteFormInfo(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="详细信息" :visible.sync="dialogTableVisible" width="60%">
      <div style="height: 420px;">
        <el-scrollbar style="height: 100%;">
          <div v-html="viewHtml"></div>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TooltipOver from '@/components/common/TooltipOver.vue'
export default {
  props: {
    formData: {
      type: Object
    },
    data: {
      type: Array
    },
    custom: {
      type: Array
    },
    resetData: {
      type: Function
    }
  },
  data () {
    return {
      tableData: [],
      dialogTableVisible: false,
      // 详细信息
      viewHtml: '',
      viewData: null,
      listContainerParentData: null
    }
  },
  watch: {
    data: {
      handler () {
        if (this.data && this.data.length > 0) {
          this.tableData = this.data.map(element => {
            let dataItem = {
              id: element.formInfo.id,
              ip: element.formInfo.ip,
              createAt: element.formInfo.createAt,
              systemName: element.formInfo.submitSystemName,
              systemItemName: element.formInfo.submitSystemItemName
            }
            if (this.custom && this.custom.length > 0) {
              this.custom.forEach((ele, index) => {
                let findItem = element.formInfoItem.filter(elem => {
                  return elem.componentFormId === ele.id
                })
                if (findItem.length > 0) {
                  let str = ''
                  findItem.forEach(ite => {
                    str += ite.value + '，'
                  })
                  str = str.slice(0, str.length - 1)
                  dataItem['custom' + (index + 1)] = str
                } else {
                  dataItem['custom' + (index + 1)] = '无'
                }
              })
            }
            return dataItem
          })
        } else {
          this.tableData = []
        }
      },
      deep: true
    }
  },
  methods: {
    viewFormInfo (formInfoId) {
      let findFormInfoItem = this.data.find(element => {
        return parseInt(element.formInfo.id) === parseInt(formInfoId)
      })

      if (!findFormInfoItem) {
        return
      }

      let viewData = []
      if (findFormInfoItem.formInfoItem && findFormInfoItem.formInfoItem.length > 0) {
        findFormInfoItem.formInfoItem.forEach(formItem => {
          let item = {}
          item.label = formItem.label
          item.value = formItem.value
          item.componentId = -1
          item.containerId = -1
          if (this.formData.listFormComponent && this.formData.listFormComponent.length > 0) {
            let component = this.formData.listFormComponent.find(comp => {
              return parseInt(comp.componentForm.id) === parseInt(formItem.componentFormId)
            })
            if (component) {
              item.componentId = component.componentForm.id
              item.containerId = component.componentForm.containerId
            }
          }
          let idx = viewData.findIndex(ite => {
            return ite.componentId === item.componentId && ite.label === item.label
          })
          if (idx > -1) {
            viewData[idx].value += '，' + item.value
          } else {
            viewData.push(item)
          }
        })
      }
      this.viewData = viewData
      this.dialogTableVisible = true
      // 获取到表单容器的结构
      // console.log(this.viewData)

      this.listContainerParentData = formDataContainerComponentTranstring(this.formData)

      // console.log(this.listContainerParentData)

      this.viewHtml = makeFormDataViewHtml(this.listContainerParentData, this.viewData)
    },
    deleteFormInfo (formInfoId) {
      // 删除
      let findFormInfoItem = this.data.find(element => {
        return parseInt(element.formInfo.id) === parseInt(formInfoId)
      })

      if (!findFormInfoItem) {
        return
      }

      // 删除
      this.$confirm('确认删除此提交的表单数据么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$post('/form/system-info-delete', {
          formInfoId: findFormInfoItem.formInfo.id
        }).then(response => {
          this.resetData()
        })
      }).catch(() => { })
    }
  },
  components: {
    TooltipOver
  }
}

function makeFormDataViewHtml (listContainerParentData, viewData) {
  if (listContainerParentData && listContainerParentData[0] && listContainerParentData[0].length > 0) {
    let html = '<div class="infoDetail-v">'
    let inHtmlComponent = []
    html += recursionMakeFormDataViewHtml(listContainerParentData, 0, viewData, inHtmlComponent)
    //  修改表单项后的，再页面表单结构中不存在的数据
    if (inHtmlComponent.length !== viewData.length) {
      let map = viewData.map(vData => {
        let item = inHtmlComponent.find(cData => {
          return parseInt(cData.componentId) === parseInt(vData.componentId)
        })
        if (!item) {
          return `
          <div class="el-col-v" style="width:100%;">
            <div class="label-v">${vData.label}</div>
            <p class="value-v">${vData.value}</p>
          </div>
          `
        } else {
          return ''
        }
      })
      html += map.join('')
    }
    html += '</div>'
    return html
  } else {
    if (viewData && viewData.length > 0) {
      let map = viewData.map(vData => {
        return `
          <div class="el-col-v" style="width:100%;">
            <div class="label-v">${vData.label}</div>
            <p class="value-v">${vData.value}</p>
          </div>
          `
      })
      let html = '<div class="infoDetail-v">'
      html += map.join('')
      html += '</div>'
      return html
    } else {
      return '<div>未获取到数据！</div>'
    }
  }
}

function recursionMakeFormDataViewHtml (listContainerParentData, parentId, viewData, inHtmlComponent) {
  if (listContainerParentData && listContainerParentData[parentId] && listContainerParentData[parentId].length > 0) {
    let html = ''
    for (let i in listContainerParentData[parentId]) {
      let colbox = listContainerParentData[parentId][i]
      if (parseInt(colbox.typeId) === 5) {
        html += '<div class="infoDetail-v">'
        html += recursionMakeFormDataViewHtml(listContainerParentData, colbox.id, viewData, inHtmlComponent)
        html += '</div>'
      } else if (parseInt(colbox.typeId) === 6) {
        html += '<div class="el-row-v">'
        html += recursionMakeFormDataViewHtml(listContainerParentData, colbox.id, viewData, inHtmlComponent)
        html += '</div>'
      } else if (parseInt(colbox.typeId) === 7) {
        let width = 'width:' + (Math.floor(10000 / listContainerParentData[parentId].length) / 100) + '%;'
        html += '<div class="el-col-v" style="' + width + '">'
        // 判断是否存在 component 的数据！
        let component = viewData.find(item => {
          return item.containerId === colbox.id
        })
        if (component) {
          html += `
          <div>
            <div class="label-v">${component.label}</div>
            <p class="value-v">${component.value}</p>
          </div>
          `
          inHtmlComponent.push(component)
        } else {
          html += recursionMakeFormDataViewHtml(listContainerParentData, colbox.id, viewData, inHtmlComponent)
        }
        html += '</div>'
      }
    }
    return html
  } else {
    return ''
  }
}

function formDataContainerComponentTranstring (formData) {
  if (!formData || !formData.listFormContainer || formData.listFormContainer.length < 1 || !formData.listFormComponent || formData.listFormComponent.length < 1) {
    return null
  }
  let { listFormContainer } = formData
  let listContainer = []
  if (!listFormContainer || listFormContainer.length < 1) {
    return null
  }
  listFormContainer.forEach(element => {
    if (element.containerForm && parseInt(element.containerForm.status) === 0) {
      listContainer.push({
        id: element.containerForm.id,
        parentId: element.containerForm.parentId,
        boxId: element.containerForm.boxId,
        typeId: element.containerForm.typeId
      })
    }
  })
  if (listContainer.length < 1) {
    return null
  }
  let listContainerParentData = {}
  if (!listContainer || listContainer.length < 1) {
    return null
  }
  listContainer.forEach(element => {
    if (!listContainerParentData[element.parentId]) {
      listContainerParentData[element.parentId] = []
    }
    listContainerParentData[element.parentId].push(element)
  })

  return listContainerParentData
}

</script>

<style scoped lang="scss">
.form-info-list-table /deep/ .el-table th {
  color: #555;
}
</style>
<style >
.form-info-list-table .el-scrollbar__wrap {
  overflow-x: hidden;
}
.infoDetail-v .el-row-v {
  margin-left: -5px;
  margin-right: -5px;
  width: 100%;
  overflow: hidden;
}
.infoDetail-v .el-col-v {
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 5px;
  padding-right: 5px;
}
.infoDetail-v .el-col-v .label-v {
  font-weight: bold;
  padding: 10px;
  background: #f2f2f2;
}
.infoDetail-v .el-col-v .value-v {
  padding: 10px 10px 20px;
}
</style>
